<template>

      <jb-crud-page ref="userPageRef" :edit-component="Edit" :search-url="`/api/admin/wechatUser/datas/${props.id}`" :search-conditions="pageConditions">

          <template #title>
              <div class="flex items-center">
                  <span>微信用户管理</span>
              </div>
          </template>

          <template #conditions-form>
              <n-input
                  v-model:value="pageConditions.keywords"
                  type="text"
                  style="width: 130px"
                  placeholder="输入关键字搜索"
              />
              <jb-select
                  v-model:value="pageConditions.sex"
                  placeholder="=性别="
                  url="/api/admin/dictionary/options?typeKey=sex"
                  class="max-w-100px"
                  filterable
              >
              </jb-select>
          </template>

          <template #opt>
              <jb-btn
                  :icon="Icons.REFRESH"
                  ghost
                  type="primary"
                  confirm-text="确定同步拉取数据？"
                  :url="`/api/admin/wechatUser/sync/${props.id}`"
                  @success="userPageRef?.loadData()"
              >
                  同步拉取
              </jb-btn>
          </template>


          <template #default="{ state,list }">
              <vxe-table
                  class="flex-col flex-1"
                  show-overflow="tooltip"
                  :seq-config="{ startIndex: state.tableStartIndex }"
                  :column-config="{ resizable: true }"
                  border
                  show-header-overflow
                  :row-config="{ isHover: true, height: 80 }"
                  align="center"
                  :data="list"
              >
                  >
                  <jb-column type="seq" title="序号" width="60"></jb-column>
                  <jb-column field="avatar" title="头像" width="120">
                      <template #default="{ row }">
                          <jb-avatar :src="row.headImgUrl">
                          </jb-avatar>
                      </template>
                  </jb-column>
                  <jb-column field="nickname" title="名称" min-width="300"></jb-column>

                  <jb-column field="realname" title="真实姓名" width="120">

                  </jb-column>
                  <jb-column field="sex" title="性别" width="100">
                      <template #default="{ row }">
                          <n-tag
                              v-if="row.sex"
                              :type="row.sex === 1 ? 'success' : 'warning'"
                          >{{
                                  row?.sex === 1 ? '男' : row?.sex === 2 ? '女' : ''
                              }}</n-tag
                          >
                          <span v-else>未知</span>
                      </template>
                  </jb-column>
                  <jb-column field="phone" title="手机号" width="140">
                  </jb-column>
                  <jb-column field="weixin" title="微信号" width="140">
                  </jb-column>
                  <jb-column field="enable" title="是否启用" width="80">
                      <template #default="{ row }">
                          <jb-switch
                              v-model:value="row.enable"
                              :url="`/api/admin/wechatUser/toggleEnable/${props.id}-${row.id}`"
                          ></jb-switch>
                      </template>
                  </jb-column>
                  <jb-column  title="操作" fixed="right" width="100">
                      <template #default="{ row }">
                          <jb-btn
                              v-if="row.type!=6"
                              tip-text="同步用户信息"
                              :icon="Icons.REFRESH"
                              secondary
                              type="info"
                              quaternary
                              circle
                              strong
                              class="mx-8px"
                              confirm-text="确定同步该用户信息？"
                              :url="`/api/admin/wechatUser/syncUser/${props.id}-${row.id}`"
                              @success="userPageRef?.loadData()"
                          ></jb-btn>
                          <span v-else>-</span>
                      </template>
                  </jb-column>
              </vxe-table>
          </template>

      </jb-crud-page>
</template>

<script setup lang="ts">
import {ref} from "vue";
import JbCrudPage from "@/components/_builtin/jb-crud-page/index.vue";
import {useResetableData} from "@/hooks/common/use-resetable-data";
import JbBtn from "@/components/_builtin/jb-btn/index.vue";
import Edit from "./components/edit.vue"
import {Icons} from "@/constants";

const props = defineProps({
    id: String
})

const userPageRef = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    sex: '',
    subjectType: '',
    isAuthenticated: '',
    enable: ''
})

</script>


<style scoped>

</style>